<template>
  <swiper class="swipter-box" ref="mySwiper" :options="swiperOptions">
    <swiper-slide class="content-box" v-for="item in recommendList" :key="item.id">
      <div class="recommend-item">
        <van-image class="img" :alt="item.name" :src="item.picUrl+'?param=180y180'" />
        <div class="van-ellipsis">{{item.name}}</div>
      </div>
    </swiper-slide>
    <div style="clear:both"></div>
  </swiper>
</template>
<script  type='module'>
import { SwiperSlide, Swiper } from 'vue-awesome-swiper'
// import 'swiper/dist/css/swiper.css'

export default {
  name: 'carrousel',
  components: {
    Swiper, SwiperSlide
  },
  props: {
    recommendList: Array
  },
  data () {
    return {
      swiperOptions: {
        // loop: true,
        slidesPerView: 'auto',
        // slidesPerView: 3,
        // spaceBetween: 15,
        freeMode: true,
        // slidesOffsetBefore: 200,
        slidesOffsetAfter: 10,
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      }
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    this.swiper.slideTo(3, 1000, false)
  }
}
</script>
 <style scoped lang="less">
// .content-box {
//   width: 100px;
.swipter-box {
  // overflow: hidden;
  height: 90px;
  display: flex;
  .content-box {
    width: 100px;
    display: flex;
    justify-content: center;
    text-align: center;
    // float: left;
    .recommend-item {
      width: 90px;
      height: 90px;
      .img {
        height: 90px;
        overflow: hidden;
        border-radius: 8px;
      }
      .van-ellipsis {
        line-height: 26px;
      }
    }
  }
}
// }
</style>
